.button {
  --background-color: var(--rstudio-white);
  --text-color: var(--font-color);
  --outline-color: transparent;
  --outline-width: 1px;

  padding: 0.5rem 1rem;

  border: var(--outline-width) solid var(--outline-color);
  background-color: var(--background-color);
  color: var(--text-color);

  border-radius: var(--corner-radius);
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.button:disabled {
  --text-color: var(--font-color-disabled);
  cursor: not-allowed;
}

.regular {
  --outline-color: var(--rstudio-blue);
}

.delete {
  --outline-color: var(--red);
}

.icon {
  --outline-width: 0px;
  display: inline-grid;
  place-content: center;
  padding: 8px;
  aspect-ratio: 1;
}

.transparent {
  --outline-color: transparent;
  --background-color: transparent;
}
